<template>
  <div class="home-container">
    <!-- 简化顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="location" @click="goToLocationSelect">
          <i class="el-icon-location"></i>
          <span>{{ currentLocation }}</span>
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
    </header>

    <!-- 轮播图 -->
    <div class="banner-section">
      <el-carousel height="200px" indicator-position="outside">
        <el-carousel-item v-for="item in banners" :key="item.id">
          <div
            class="banner-item"
            :style="{ backgroundImage: `url(${item.image})` }"
          >
            <div class="banner-content">
              <h3>{{ item.title }}</h3>
              <p>{{ item.subtitle }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 搜索框 - 放在banner和导航栏之间 -->
    <div class="search-section">
      <div class="search-container">
        <el-input
          v-model="searchKeyword"
          placeholder="请输入小区名、地址或房源编号"
          prefix-icon="el-icon-search"
          @keyup.enter="handleSearch"
          class="search-input"
        />
        <el-button type="primary" @click="handleSearch" class="search-btn">
          搜索
        </el-button>
      </div>
    </div>

    <!-- 功能导航 -->
    <div class="nav-section">
      <div class="nav-grid">
        <div class="nav-item" @click="goToPropertyList">
          <div class="nav-icon">
            <i class="el-icon-office-building"></i>
          </div>
          <span>二手房</span>
        </div>
        <div class="nav-item" @click="goToNewHouse">
          <div class="nav-icon">
            <i class="el-icon-house"></i>
          </div>
          <span>新房</span>
        </div>
        <div class="nav-item" @click="goToRental">
          <div class="nav-icon">
            <i class="el-icon-key"></i>
          </div>
          <span>租房</span>
        </div>
        <div class="nav-item" @click="goToMap">
          <div class="nav-icon">
            <i class="el-icon-map-location"></i>
          </div>
          <span>地图找房</span>
        </div>
        <div class="nav-item" @click="goToMortgageCalculator">
          <div class="nav-icon">
            <i class="el-icon-calculator"></i>
          </div>
          <span>房贷计算</span>
        </div>
        <div class="nav-item" @click="goToSignaturePad">
          <div class="nav-icon">
            <i class="el-icon-edit"></i>
          </div>
          <span>电子签名</span>
        </div>
        <div class="nav-item" @click="goToARViewer">
          <div class="nav-icon">
            <i class="el-icon-view"></i>
          </div>
          <span>AR看房</span>
        </div>
      </div>
    </div>

    <!-- 瀑布式房源列表 -->
    <div class="property-section">
      <div class="tabs-header">
        <div class="tab-list">
          <div
            class="tab-item"
            :class="{ active: activeTab === 'recommend' }"
            @click="activeTab = 'recommend'"
          >
            推荐
          </div>
          <div
            class="tab-item"
            :class="{ active: activeTab === 'newHouse' }"
            @click="activeTab = 'newHouse'"
          >
            新房
          </div>
          <div
            class="tab-item"
            :class="{ active: activeTab === 'secondHand' }"
            @click="activeTab = 'secondHand'"
          >
            二手房
          </div>
          <div
            class="tab-item"
            :class="{ active: activeTab === 'rental' }"
            @click="activeTab = 'rental'"
          >
            租房
          </div>
        </div>
      </div>

      <div class="waterfall-container">
        <div class="property-grid">
          <div
            class="property-card"
            v-for="item in currentPropertyList"
            :key="item.id"
            @click="goToPropertyDetail(item.id)"
          >
            <div class="property-image">
              <img :src="item.image" :alt="item.title" @load="onImageLoad" />
              <div class="property-tags">
                <span v-for="tag in item.tags" :key="tag" class="tag">{{
                  tag
                }}</span>
              </div>
              <div class="property-status" v-if="item.status">
                {{ item.status }}
              </div>
            </div>
            <div class="property-info">
              <div class="property-header">
                <h3 class="property-title">{{ item.title }}</h3>
                <p class="property-type">{{ item.type }}</p>
              </div>
              <p class="property-location">
                <i class="el-icon-location-outline"></i>
                {{ item.location }}
              </p>
              <div class="property-features">
                <span class="feature-item">{{ item.rooms }}</span>
                <span class="feature-item">{{ item.area }}㎡</span>
                <span class="feature-item">{{ item.direction }}</span>
                <span class="feature-item">{{ item.floor }}</span>
              </div>
              <div class="property-price">
                <span class="total-price">{{ item.price }}万</span>
                <span class="unit-price">{{ item.unitPrice }}元/㎡</span>
              </div>
              <div class="property-meta">
                <span class="publish-time">{{ item.publishTime }}</span>
                <span class="view-count">{{ item.viewCount }}人看过</span>
              </div>
            </div>
          </div>
        </div>
        <div class="load-more" v-if="hasMore" @click="loadMore">
          <el-button type="text" :loading="loading">{{
            loading ? "加载中..." : "加载更多"
          }}</el-button>
        </div>
      </div>
    </div>

    <!-- 热门区域 -->
    <div class="area-section">
      <div class="section-header">
        <h2>热门区域</h2>
        <span class="more">更多 ></span>
      </div>
      <div class="area-list">
        <div class="area-item" v-for="area in hotAreas" :key="area.id">
          <div class="area-name">{{ area.name }}</div>
          <div class="area-price">{{ area.avgPrice }}元/㎡</div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <footer class="footer-nav">
      <div class="nav-item active">
        <i class="el-icon-s-home"></i>
        <span>首页</span>
      </div>
      <div class="nav-item" @click="goToPropertyList">
        <i class="el-icon-search"></i>
        <span>找房</span>
      </div>
      <div class="nav-item" @click="goToNews">
        <i class="el-icon-news"></i>
        <span>资讯</span>
      </div>
      <div class="nav-item" @click="goToProfile">
        <i class="el-icon-user"></i>
        <span>我的</span>
      </div>
    </footer>
  </div>
</template>

<script>
import { getHouseslist } from "@/api/houses";

export default {
  name: "AnjukeHome",
  data() {
    return {
      searchKeyword: "",
      currentLocation: "上海",
      activeTab: "recommend",
      loading: false,
      hasMore: true,
      page: 1,
      pageSize: 10,
      banners: [
        {
          id: 1,
          title: "品质新房",
          subtitle: "精选品质楼盘，限时优惠",
          image:
            "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=375&h=200&fit=crop",
        },
        {
          id: 2,
          title: "热门二手房",
          subtitle: "真实房源，快速成交",
          image:
            "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=375&h=200&fit=crop",
        },
        {
          id: 3,
          title: "优质租房",
          subtitle: "海量房源，拎包入住",
          image:
            "https://images.unsplash.com/photo-1560448204-61dc36dc9336?w=375&h=200&fit=crop",
        },
      ],
      // 房源数据（保留一些静态数据作为备用）
      propertyData: {
        recommend: [
          {
            id: 0,
            title: "加载中...",
            type: "住宅",
            location: "加载中...",
            rooms: "加载中...",
            area: 0,
            direction: "加载中...",
            floor: "加载中...",
            price: 0,
            unitPrice: 0,
            image: "https://via.placeholder.com/400x300?text=加载中...",
            tags: ["加载中"],
            status: "加载中",
            publishTime: "刚刚",
            viewCount: 0,
          },
          {
            id: 1,
            title: "阳光花园 精装三室",
            type: "住宅",
            location: "浦东新区·张江高科地铁站",
            rooms: "3室2厅",
            area: 89,
            direction: "南向",
            floor: "高层/32层",
            price: 580,
            unitPrice: 6517,
            image:
              "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=400&h=300&fit=crop",
            tags: ["近地铁", "精装修", "满五唯一"],
            status: "在售",
            publishTime: "2小时前",
            viewCount: 128,
          },
          {
            id: 2,
            title: "绿地世纪城 南北通透",
            type: "公寓",
            location: "徐汇区·漕河泾开发区",
            rooms: "2室1厅",
            area: 72,
            direction: "南北通透",
            floor: "中层/18层",
            price: 420,
            unitPrice: 5833,
            image:
              "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=400&h=300&fit=crop",
            tags: ["学区房", "近地铁", "满两年"],
            status: "急售",
            publishTime: "5小时前",
            viewCount: 256,
          },
          {
            id: 3,
            title: "万科城市花园 四房豪宅",
            type: "别墅",
            location: "闵行区·七宝古镇",
            rooms: "4室2厅",
            area: 120,
            direction: "东南向",
            floor: "低层/6层",
            price: 780,
            unitPrice: 6500,
            image:
              "https://images.unsplash.com/photo-1570129477492-45c003edd2be?w=400&h=300&fit=crop",
            tags: ["新上", "豪华装修", "带车位"],
            status: "新上",
            publishTime: "刚刚",
            viewCount: 89,
          },
          {
            id: 4,
            title: "静安豪景 高层景观房",
            type: "住宅",
            location: "静安区·南京西路",
            rooms: "2室2厅",
            area: 95,
            direction: "西南向",
            floor: "高层/45层",
            price: 720,
            unitPrice: 7579,
            image:
              "https://images.unsplash.com/photo-1560185127-6c93f25931ae?w=400&h=300&fit=crop",
            tags: ["景观房", "近商圈", "拎包入住"],
            status: "在售",
            publishTime: "1天前",
            viewCount: 342,
          },
          {
            id: 5,
            title: "黄浦滨江 江景豪宅",
            type: "大平层",
            location: "黄浦区·外滩",
            rooms: "3室2厅",
            area: 150,
            direction: "东向",
            floor: "高层/35层",
            price: 1200,
            unitPrice: 8000,
            image:
              "https://images.unsplash.com/photo-1564501049412-61c2a3083791?w=400&h=300&fit=crop",
            tags: ["江景房", "豪华装修", "带车位"],
            status: "在售",
            publishTime: "3天前",
            viewCount: 567,
          },
          {
            id: 6,
            title: "长宁古北 花园洋房",
            type: "洋房",
            location: "长宁区·古北新区",
            rooms: "3室1厅",
            area: 108,
            direction: "南向",
            floor: "中层/12层",
            price: 650,
            unitPrice: 6019,
            image:
              "https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=400&h=300&fit=crop",
            tags: ["花园洋房", "近地铁", "满五唯一"],
            status: "在售",
            publishTime: "6小时前",
            viewCount: 234,
          },
        ],
        newHouse: [
          {
            id: 7,
            title: "中海·汇德里 全新楼盘",
            type: "新房",
            location: "普陀区·真如副中心",
            rooms: "3室2厅",
            area: 98,
            direction: "南向",
            floor: "高层/33层",
            price: 680,
            unitPrice: 6939,
            image:
              "https://images.unsplash.com/photo-1484154218962-a197022b5858?w=400&h=300&fit=crop",
            tags: ["新盘", "品牌开发商", "精装修"],
            status: "待售",
            publishTime: "本周开盘",
            viewCount: 1024,
          },
          {
            id: 8,
            title: "华润·外滩九里",
            type: "新房",
            location: "黄浦区·董家渡",
            rooms: "4室2厅",
            area: 135,
            direction: "东南向",
            floor: "超高层/50层",
            price: 1500,
            unitPrice: 11111,
            image:
              "https://images.unsplash.com/photo-1507089947368-19c1da9775ae?w=400&h=300&fit=crop",
            tags: ["江景房", "豪华装修", "品牌开发商"],
            status: "在售",
            publishTime: "新盘",
            viewCount: 2341,
          },
        ],
        secondHand: [
          {
            id: 9,
            title: "世纪公园旁 精装三房",
            type: "二手房",
            location: "浦东新区·世纪公园",
            rooms: "3室2厅",
            area: 115,
            direction: "南向",
            floor: "高层/28层",
            price: 750,
            unitPrice: 6522,
            image:
              "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=400&h=300&fit=crop",
            tags: ["近公园", "精装修", "满五唯一"],
            status: "在售",
            publishTime: "3小时前",
            viewCount: 445,
          },
          {
            id: 10,
            title: "徐家汇中心 地铁口",
            type: "二手房",
            location: "徐汇区·徐家汇",
            rooms: "2室1厅",
            area: 78,
            direction: "东向",
            floor: "中层/20层",
            price: 580,
            unitPrice: 7436,
            image:
              "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=400&h=300&fit=crop",
            tags: ["地铁口", "商圈房", "拎包入住"],
            status: "急售",
            publishTime: "1小时前",
            viewCount: 678,
          },
        ],
        rental: [
          {
            id: 11,
            title: "陆家嘴精装公寓",
            type: "整租",
            location: "浦东新区·陆家嘴",
            rooms: "1室1厅",
            area: 45,
            direction: "南向",
            floor: "高层/40层",
            price: 5.5,
            unitPrice: 1222,
            image:
              "https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?w=400&h=300&fit=crop",
            tags: ["近地铁", "精装修", "拎包入住"],
            status: "可看房",
            publishTime: "30分钟前",
            viewCount: 892,
          },
          {
            id: 12,
            title: "静安寺服务式公寓",
            type: "整租",
            location: "静安区·静安寺",
            rooms: "2室1厅",
            area: 65,
            direction: "南向",
            floor: "中层/25层",
            price: 8.5,
            unitPrice: 1308,
            image:
              "https://images.unsplash.com/photo-1560185127-6c93f25931ae?w=400&h=300&fit=crop",
            tags: ["服务公寓", "近地铁", "酒店式管理"],
            status: "随时看房",
            publishTime: "2小时前",
            viewCount: 567,
          },
        ],
      },
      hotAreas: [
        { id: 1, name: "浦东", avgPrice: 65000 },
        { id: 2, name: "徐汇", avgPrice: 72000 },
        { id: 3, name: "静安", avgPrice: 85000 },
        { id: 4, name: "黄浦", avgPrice: 78000 },
        { id: 5, name: "长宁", avgPrice: 68000 },
        { id: 6, name: "闵行", avgPrice: 52000 },
      ],
    };
  },
  computed: {
    currentPropertyList() {
      return this.propertyData[this.activeTab] || [];
    },
  },
  mounted() {
    // 从URL参数获取位置
    const location = this.$route.query.location;
    if (location) {
      this.currentLocation = location;
    }

    // 加载推荐房源数据
    this.loadRecommendHouses();

    // 模拟加载更多数据
    setTimeout(() => {
      this.hasMore = true;
    }, 2000);
  },
  watch: {
    "$route.query.location"(newLocation) {
      if (newLocation) {
        this.currentLocation = newLocation;
        // 位置改变时，重新加载推荐房源
        if (this.activeTab === "recommend") {
          this.loadRecommendHouses();
        }
      }
    },
    // 监听tab切换，当切换到推荐时加载数据
    activeTab(newTab) {
      if (newTab === "recommend") {
        this.loadRecommendHouses();
      }
    },
  },
  methods: {
    handleSearch() {
      if (this.searchKeyword.trim()) {
        this.$router.push({
          path: "/property",
          query: { keyword: this.searchKeyword },
        });
      }
    },
    goToPropertyList() {
      this.$router.push("/property");
    },
    goToNewHouse() {
      this.$router.push("/purchase");
    },
    goToRental() {
      this.$router.push("/rental");
    },
    goToMap() {
      this.$router.push("/map");
    },
    goToMortgageCalculator() {
      this.$router.push("/mortgage-calculator");
    },
    goToSignaturePad() {
      this.$router.push("/signature-pad");
    },
    goToARViewer() {
      this.$router.push("/ar-viewer");
    },
    goToPropertyDetail(id) {
      this.$router.push(`/property-detail/${id}`);
    },
    goToNews() {
      this.$message.info("资讯功能开发中...");
    },
    goToProfile() {
      this.$router.push("/profile");
    },
    onImageLoad(event) {
      // 图片加载完成后的处理
      event.target.classList.add("loaded");
    },
    loadMore() {
      if (this.activeTab === "recommend") {
        // 推荐标签不支持加载更多
        this.$message.info("推荐房源不支持加载更多");
      } else {
        this.loading = true;
        // 模拟其他标签加载更多数据
        setTimeout(() => {
          this.loading = false;
          this.hasMore = false; // 模拟没有更多数据
          this.$message.success("已加载全部房源");
        }, 1000);
      }
    },
    // 格式化发布时间
    formatPublishTime(timeStr) {
      try {
        const date = new Date(timeStr);
        const now = new Date();
        const diff = now - date;
        const minutes = Math.floor(diff / (1000 * 60));
        const hours = Math.floor(diff / (1000 * 60 * 60));
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        
        if (minutes < 1) {
          return '刚刚';
        } else if (minutes < 60) {
          return `${minutes}分钟前`;
        } else if (hours < 24) {
          return `${hours}小时前`;
        } else if (days < 30) {
          return `${days}天前`;
        } else {
          // 如果超过30天，显示具体日期
          return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        }
      } catch (error) {
        console.error('时间格式化错误:', error);
        return '刚刚';
      }
    },
    // 加载推荐房源数据
    loadRecommendHouses() {
      this.loading = true;

      getHouseslist({
        pageNum: 1,
        pageSize: 99999,
        location: this.currentLocation,
        type: "recommend",
      })
        .then((res) => {
          this.loading = false;

          // 接口返回的数据结构是 { code: 200, data: [房源列表] }
          if (res.code === 200 && res.data) {
            // 直接从data获取房源列表
            const backendList = Array.isArray(res.data) ? res.data : [];

            // 将后端数据映射为前端需要的格式，并添加完善的数据验证
            const newList = backendList.map((item) => {
              // 确保item是有效的对象
              if (!item || typeof item !== 'object') {
                return {
                  id: 0,
                  title: "数据异常",
                  type: "住宅",
                  location: "未知地址",
                  rooms: "未知户型",
                  area: 0,
                  direction: "未知朝向",
                  floor: "未知楼层",
                  price: 0,
                  unitPrice: 0,
                  image: "https://via.placeholder.com/400x300?text=数据异常",
                  tags: ["数据异常"],
                  status: "数据异常",
                  publishTime: "刚刚",
                  viewCount: 0
                };
              }

              return {
                // 根据最新数据结构优化映射
                id: typeof item.sourceId === 'number' ? item.sourceId : typeof item.propertyId === 'number' ? item.propertyId : 0,
                title: typeof item.sourceName === 'string' && item.sourceName.trim() ? item.sourceName : typeof item.propertyName === 'string' && item.propertyName.trim() ? item.propertyName : "未命名房源",
                type: typeof item.typeName === 'string' && item.typeName.trim() ? item.typeName : (typeof item.houseType === 'string' && item.houseType === "写字楼") ? "写字楼" : "住宅",
                // 优化位置信息显示
                location: typeof item.address === 'string' && item.address.trim() 
                          ? item.address 
                          : typeof item.communityAddress === 'string' && item.communityAddress.trim() 
                          ? item.communityAddress 
                          : "未知地址",
                // 户型信息处理 - 优先使用houseType
                rooms: typeof item.houseType === 'string' && item.houseType.trim() 
                        ? item.houseType 
                        : typeof item.typeName === 'string' && item.typeName.trim() 
                        ? item.typeName 
                        : "未知户型",
                // 面积信息处理 - 优先使用houseBuildingArea
                area: typeof item.houseBuildingArea === 'number' && item.houseBuildingArea > 0 
                      ? item.houseBuildingArea 
                      : typeof item.buildingArea === 'number' && item.buildingArea > 0 
                      ? item.buildingArea 
                      : typeof item.landArea === 'number' && item.landArea > 0 
                      ? item.landArea 
                      : 0,
                // 朝向信息处理
                direction: typeof item.orientation === 'string' && item.orientation.trim() 
                           ? item.orientation 
                           : "未知朝向",
                // 楼层信息处理
                floor: typeof item.floorInfo === 'string' && item.floorInfo.trim() 
                       ? item.floorInfo 
                       : "未知楼层",
                // 价格处理 - 优先使用houseTotalPrice
                price: typeof item.houseTotalPrice === 'number' && item.houseTotalPrice > 0 
                       ? Math.round(item.houseTotalPrice / 10000) 
                       : typeof item.totalPrice === 'number' && item.totalPrice > 0 
                       ? Math.round(item.totalPrice / 10000) 
                       : (typeof item.price === 'number' && item.price > 0 
                          ? item.price 
                          : 0), // 转换为万元
                // 单价处理
                unitPrice: typeof item.unitPrice === 'number' && item.unitPrice > 0 
                           ? item.unitPrice 
                           : typeof item.averagePrice === 'number' && item.averagePrice > 0 
                           ? Math.round(item.averagePrice) 
                           : 0,
                // 图片处理
                image: typeof item.image === 'string' && item.image.trim() 
                       ? item.image 
                       : "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=400&h=300&fit=crop",
                // 标签处理 - 根据用户最新数据结构添加特定标签
                tags: Array.isArray(item.tags) && item.tags.length > 0 
                       ? item.tags 
                       : [
                           // 根据用户数据添加特定标签
                           item.isExclusive === 1 ? "独家房源" : "",
                           item.isLowDensity === 1 ? "低密度" : "",
                           item.isUnderConstruction === 1 ? "在建" : "",
                           item.decorationName || "",
                           typeof item.decorationId === 'number' && item.decorationId > 0 ? `装修:${item.decorationId}` : ""
                         ].filter(Boolean).length > 0 
                         ? [
                             ...[
                               item.isExclusive === 1 ? "独家房源" : "",
                               item.isLowDensity === 1 ? "低密度" : "",
                               item.isUnderConstruction === 1 ? "在建" : "",
                               item.decorationName || "",
                               typeof item.decorationId === 'number' && item.decorationId > 0 ? `装修:${item.decorationId}` : ""
                             ].filter(Boolean)
                           ]
                         : ["推荐房源"],
                // 状态处理
                status: typeof item.statusName === 'string' && item.statusName.trim() 
                        ? item.statusName 
                        : typeof item.status === 'string' && item.status.trim() 
                        ? item.status 
                        : "在售",
                // 发布时间处理 - 优化时间显示逻辑
                publishTime: typeof item.updateTime === 'string' && item.updateTime.trim() 
                             ? this.formatPublishTime(item.updateTime) 
                             : "刚刚",
                // 浏览量处理
                viewCount: Math.floor(Math.random() * 500) + 100
              };
            });

            console.log("推荐房源数据:", newList);
            // 直接替换数据，不分页
            this.propertyData.recommend = newList;

            // 如果没有数据，显示提示
            if (this.propertyData.recommend.length === 0) {
              this.$message.info("暂无推荐房源");
            }
          } else {
            this.$message.error("获取推荐房源失败，请重试");
            console.error("获取推荐房源失败:", res);
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("获取推荐房源失败，请检查网络连接");
          console.error("获取推荐房源异常:", err);
        });
    },
    goToLocationSelect() {
      this.$router.push("/location-select");
    },
  },
};
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding-bottom: 60px;
}

.header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 12px 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 16px;
  color: #667eea;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.location:hover {
  background: rgba(102, 126, 234, 0.1);
}

.search-section {
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.search-container {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-input {
  flex: 1;
}

.search-input .el-input__inner {
  border-radius: 25px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  padding-left: 45px;
  height: 44px;
  font-size: 14px;
}

.search-btn {
  border-radius: 25px;
  height: 44px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
}

.banner-section {
  margin: 12px 16px;
}

.banner-item {
  height: 200px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.banner-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.banner-content h3 {
  font-size: 20px;
  margin: 0 0 8px 0;
  font-weight: bold;
}

.banner-content p {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
}

.nav-section {
  margin: 12px 16px;
}

.nav-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 8px;
}

.nav-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: white;
  font-size: 20px;
}

.nav-item span {
  font-size: 12px;
  color: #333;
}

.recommend-section,
.area-section {
  margin: 12px 16px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-header h2 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.more {
  font-size: 14px;
  color: #667eea;
  cursor: pointer;
}

.property-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.property-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.property-image {
  position: relative;
  height: 160px;
}

.property-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.property-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #ff6b6b;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.property-info {
  padding: 12px;
}

.property-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 0 0 8px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-location {
  font-size: 14px;
  color: #666;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.property-features {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.property-features span {
  font-size: 12px;
  color: #999;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 2px;
}

.property-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #ff6b6b;
}

.unit-price {
  font-size: 12px;
  color: #999;
}

.area-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.area-item {
  background: white;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.area-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.area-price {
  font-size: 12px;
  color: #667eea;
}

/* 瀑布式房源样式 */
.property-section {
  margin: 12px 16px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tabs-header {
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.tab-list {
  display: flex;
  background: white;
}

.tab-item {
  flex: 1;
  padding: 15px 0;
  text-align: center;
  font-size: 15px;
  color: #666;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.tab-item.active {
  color: #667eea;
  font-weight: 600;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background: #667eea;
  border-radius: 2px;
}

.waterfall-container {
  padding: 12px;
}

.property-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.property-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.property-card:hover {
  transform: translateY(-2px);
}

.property-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.property-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.property-image img.loaded {
  transform: scale(1.02);
}

.property-tags {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.tag {
  background: rgba(255, 107, 107, 0.9);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
}

.tag:nth-child(2) {
  background: rgba(102, 126, 234, 0.9);
}

.tag:nth-child(3) {
  background: rgba(118, 75, 162, 0.9);
}

.property-status {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 193, 7, 0.9);
  color: #333;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.property-info {
  padding: 12px;
}

.property-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.property-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-type {
  font-size: 12px;
  color: #667eea;
  background: rgba(102, 126, 234, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  margin: 0;
  white-space: nowrap;
}

.property-location {
  font-size: 14px;
  color: #666;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-features {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.feature-item {
  font-size: 12px;
  color: #999;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.property-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.total-price {
  font-size: 18px;
  font-weight: bold;
  color: #ff6b6b;
}

.unit-price {
  font-size: 12px;
  color: #999;
}

.property-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.load-more {
  text-align: center;
  padding: 20px 0;
}

/* 响应式设计 - 瀑布式布局 */
@media screen and (min-width: 768px) {
  .property-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 375px) {
  .tab-item {
    font-size: 14px;
    padding: 12px 0;
  }

  .property-image {
    height: 180px;
  }

  .property-title {
    font-size: 15px;
  }

  .total-price {
    font-size: 16px;
  }
}

.footer-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  color: #666;
  cursor: pointer;
}

.nav-item.active {
  color: #667eea;
}

.nav-item i {
  font-size: 20px;
  margin-bottom: 2px;
}

/* 响应式设计 */
@media screen and (max-width: 375px) {
  .nav-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .area-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
